<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="/static/echart/echarts.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/static/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="/static/style/css/dreamlu.css" />
	<link rel="stylesheet" type="text/css" href="/static/css/icommon.css" />
	<script type="text/javascript" src="/static/js/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="/static/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="/static/js/HhUtil.js?t=20170109"></script>

    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="/static/easyui/themes/gray/easyui.css" />
    <script type="text/javascript" src="/static/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
    <!-- [扩展样式] -->
</head>

<body>
<div id="toolbar">
    <table>
        <tr>
            <td><input id="start" name="start" type="text" class="easyui-datebox" required="required"></td>
            <td><span>至</span></td>
            <td><input id="end" name="end" type="text" class="easyui-datebox" required="required"></td>

            <td>
                <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="searchFun();">查询</a>
            </td>
        </tr>
    </table>
</div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div style="width: 100%">
        <div id="line" style="width: 100%;height:400px;float:left"></div>
    </div>
</body>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例

        var Ajax={
            get: function (url,fn){
                var obj=new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据
                obj.open('GET',url,true);
                obj.onreadystatechange=function(){
                    if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState==4说明请求已完成
                        fn.call(this, obj.responseText);  //从服务器获得数据
                    }
                };
                obj.send(null);
            }
        }
        function init_callback(data){
            var datao = JSON.parse(data);
            var line_chart = echarts.init(document.getElementById('line'));
            // 指定图表的配置项和数据
            var option_line = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['当日推送信息数', '累计推送信息数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: datao.rq_list
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name:'当日推送信息数',
                        type:'line',
                        stack: '',
                        data:datao.data_list
                    },
                    {
                    name:'累计推送信息数',
                    type:'line',
                    stack: '',
                    data:datao.total_list
                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            line_chart.setOption(option_line);
        }

        function GetDateStr(AddDayCount) {
            var dd = new Date();
            dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
            var y = dd.getFullYear();
            var m = dd.getMonth()+1;//获取当前月份的日期
            var d = dd.getDate();
            return y+"-"+m+"-"+d;
        }

        function searchFun() {
            Ajax.get('/mobilepushcnt?start='+$('#start').datebox('getValues')+'&end='+$('#end').datebox('getValues'), init_callback);
        }

        $(function () {
            $('#start').datebox('setValue', GetDateStr(-7));
            $('#end').datebox('setValue', GetDateStr(-0));
            Ajax.get('/mobilepushcnt?start='+$('#start').datebox('getValues')+'&end='+$('#end').datebox('getValues'), init_callback);
        });

    </script>
</html>